<template>
  <div style=" margin: 0 20px;">
    <add-address
      :is-open-add="isOpenAdd"
      :addressInfos="addressInfos"
      @closeDialog="isOpenAdd=false"
    ></add-address>
    <update-address
      :addressData="addressData"
      :isOpenUpdate="isOpenUpdate"
      @closeDialog="isOpenUpdate = false"
    ></update-address>

    <div style="display: flex; justify-content: space-between; height: 40px; line-height: 40px;">
      <span style="font-weight: 600;  font-size: 16px; color: #333333;">收货人信息</span>
      <span
        class="operation-operation"
        @click="isOpenAdd=true"
      > 新增收货地址</span>
    </div>

    <div
      v-show="more"
      v-for="(item, index) in addressInfos"
      :key="index"
      class="item"
      @click="handleClickAddress(index)"
      @mouseenter="showOperation = index"
      @mouseleave="showOperation = -1"
    >
      <div
        :class="{'text-active': item.addressId == this.addressId}"
        class="text"
      >{{ item.name }}</div>
      <span style="margin: 0 10px;">{{ item.consignee }}</span>
      <span style="margin: 0 10px;">{{ item.area }}</span>
      <span style="margin: 0 10px;">{{ item.address }}</span>
      <span style="margin: 0 10px;">{{ item.phone }}</span>
      <span
        style="background-color: #999999; color: #fff; padding: 0 10px;"
        v-show="item.isDefault === 0"
      >默认地址</span>
      <div
        v-show="showOperation === index"
        style="flex-grow: 1; text-align: right;"
      >
        <span
          v-show="addressInfos[index].isDefault !== 0"
          @click.stop="doSetDefaultAddress(addressInfos[index].addressId, index)"
          class="operation"
        >设置默认地址</span>
        <span
          v-show="index !== 0"
          @click.stop="doDelAddress(item.addressId)"
          class="operation"
        >删除</span>
        <span
          @click.stop="update(index)"
          class="operation"
        >编辑</span>
      </div>
    </div>
    <div
      v-show="more"
      class="more"
      @click="more = !more"
    >收起地址
      <el-icon style="margin-left: 2px;">
        <ArrowUpBold />
      </el-icon>
    </div>

    <div
      v-show="!more"
      class="item"
      @mouseenter="showOperation = index"
      @mouseleave="showOperation = -1"
    >
      <div
        :class="{'text-active': addressInfos[0].addressId === addressId}"
        class="text"
      >{{ addressInfos[0].name }}</div>
      <span style="margin: 0 10px;">{{ addressInfos[0].consignee }}</span>
      <span style="margin: 0 10px;">{{ addressInfos[0].area }}</span>
      <span style="margin: 0 10px;">{{ addressInfos[0].address }}</span>
      <span style="margin: 0 10px;">{{ addressInfos[0].phone }}</span>
      <span
        style="background-color: #999999; color: #fff; padding: 0 10px;"
        v-show="addressInfos[0].isDefault === 0"
      >默认地址</span>
      <div
        v-show="showOperation === index"
        style="flex-grow: 1; text-align: right;"
      >
        <span
          v-show="addressInfos[0].isDefault !== 0"
          @click.stop="doSetDefaultAddress(addressInfos[0].addressId, 0)"
          class="operation"
        >设置默认地址</span>
        <span
          class="operation"
          @click.stop="update(0)"
        >编辑</span>
      </div>
    </div>
    <div
      v-show="!more"
      class="more"
      @click="more = !more"
    >
      更多地址
      <el-icon style="margin-left: 2px;">
        <ArrowDownBold />
      </el-icon>
    </div>
    <el-divider style="margin: 10px 0"></el-divider>
  </div>
</template>

<script>
import AddAddressVue from "../address/AddAddress.vue";
import UpdateAddressVue from "../address/UpdateAddress.vue";
import { selectAllAddress, delAddress, setDefaultAddress } from "@/api/address";

export default {
  components: {
    AddAddress: AddAddressVue,
    UpdateAddress: UpdateAddressVue,
  },
  data() {
    return {
      isOpenAdd: false,
      isOpenUpdate: false,
      more: false,
      showOperation: -1,
      addressId: 0,
      addressData: {},
      addressInfos: [
        {
          addressId: 0,
          name: "",
          consignee: "",
          area: "",
          address: "",
          phone: "",
        },
      ],
    };
  },
  methods: {
    doSelectAllAddress() {
      selectAllAddress().then((res) => {
        this.addressInfos = res;
        this.addressId = this.addressInfos[0].addressId;
    this.$emit('changeAddress', this.addressInfos[0])

      });
    },
    doDelAddress(index) {
      delAddress(index).then((res) => {
        this.addressInfos = this.addressInfos.filter(
          (v, i, a) => v.addressId != index
        );
      });
    },
    doSetDefaultAddress(id, index) {
      setDefaultAddress(id).then((res) => {
        this.addressInfos.forEach((v, i, a) => {
          if (i == index) {
            this.addressInfos[i].isDefault = 0;
          } else {
            this.addressInfos[i].isDefault = 1;
          }
        });
      });
    },

    handleClickAddress(index) {
      var temp = this.addressInfos.splice(index, 1)[0];
      this.addressId = temp.addressId;
      this.addressInfos = [temp, ...this.addressInfos];
      this.$emit('changeAddress', temp)
    },

    update(index) {
      this.isOpenUpdate = true;
      this.addressData = this.addressInfos[index];
    },
  },
  created() {
    this.doSelectAllAddress();
  },
};
</script>

<style scoped>
.text {
  width: 120px;
  height: 20px;
  display: flex;
  justify-content: center;
  line-height: 20px;
  padding: 4px 4px;
}

.text-active {
  border: 1px solid #3271ae;
  background: linear-gradient(-45deg, #3271ae 12px, #fff 0);
}

.item {
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  height: 30px;
  line-height: 30px;
}

.item:hover {
  cursor: pointer;
  background: #fff3f3;
}

.more {
  cursor: pointer;
  margin-top: 10px;
  display: flex;
  align-items: center;
}

.operation {
  margin-right: 10px;
}

.operation:hover {
  color: #3271ae;
}

.operation-operation:hover {
  color: #3271ae;
  cursor: pointer;
}
</style>